<template>
    <app-layout>
        <view class="cash-head dir-top-nowrap main-center">
            <view class="cash-form">
                <view class="dir-left-nowrap cross-center line">
                    <view class="box-grow-0 required">开户人</view>
                    <view class="box-grow-1">
                        <input class="cash-input" placeholder="请输入正确的姓名"
                               placeholder-style="color:#cccccc;font-size:28rpx" v-model="form.pay_name"/>
                    </view>
                </view>
                <view class="dir-left-nowrap cross-center line">
                    <view class="box-grow-0 required">开户行</view>
                    <view class="box-grow-1">
                        <input class="cash-input" placeholder="请输入正确的银行名称"
                               placeholder-style="color:#cccccc;font-size:28rpx" v-model="form.pay_account"/>
                    </view>
                </view>
                <view class="dir-left-nowrap cross-center no-line">
                    <view class="box-grow-0 required">账号</view>
                    <view class="box-grow-1">
                        <input class="cash-input" placeholder="请输入正确银行卡账号"
                               placeholder-style="color:#cccccc;font-size:28rpx" v-model="form.pay_bank"/>
                    </view>
                </view>
            </view>
            <view class="cash-btn main-center">
                <app-button @click="submit" height="80" width="702" background="#FF4544" font-size="32" color="#FFFFFF" round>提交</app-button>
            </view>
        </view>
    </app-layout>
</template>

<script>
    export default {
        name: "bankCard",
        components: {},
        data() {
            return {
                form: {
                    pay_name: '',
                    pay_account: '',
                    pay_bank: '',
                },
                mch_id: 0,
            }
        },
        computed: {},
        onLoad(options) {
            const self = this;
            self.mch_id = options.mch_id;
            uni.showLoading({
                mask: true,
                title: '加载中...'
            });
            self.$request({
                url: self.$api.user.user_info,
            }).then(response => {
                uni.hideLoading();
                if (response.code === 0) {
                    if(response.data.bank) {
                        self.form = response.data.bank
                    }
                }
            })
        },
        methods: {
            submit: function (e) {
                const self = this;
                let form = self.form;
                let content = function () {
                    if (!form.pay_name) {
                        return "姓名不能为空";
                    }
                    if (!form.pay_account) {
                        return "开户行不能为空";
                    }
                    if (!form.pay_bank) {
                        return "账号不能为空";
                    }
                    return false;
                }();

                if (content) {
                    uni.showToast({icon: 'none', title: content});
                    return
                }
                // self.$showLoading({text: '正在提交'});
                uni.showLoading({
                    mask: true,
                    title: '正在提交'
                });
                self.$request({
                    url: self.$api.registered.bank,
                    method: 'POST',
                    data: {
                        pay_name: self.form.pay_name,
                        pay_account: self.form.pay_account,
                        pay_bank: self.form.pay_bank,
                        type: 'u_bank'
                    }
                }).then(info => {
                    uni.hideLoading();
                    // self.$hideLoading();
                }).catch(e => {
                    uni.hideLoading();
                    // self.$hideLoading();
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .cash-form {
        margin-top: #{20rpx};
        background: #fff;
        font-size: #{28rpx};

        .line {
            height: #{88rpx};
            margin: 0 #{24rpx};
            border-bottom: 1px solid #ddd;
        }

        .no-line {
            height: #{88rpx};
            margin: 0 #{24rpx};
        }

        .required {
            min-width: #{180rpx - 24rpx - 24rpx};
        }

        .required::before {
            content: '*';
            vertical-align: top;
            color: #ff4544;
        }

        .cash-input {
            height: 100%;
            color: #353535;
            font-size: #{28rpx};
        }
    }

    .cash-btn {
        margin-top: #{40rpx};
    }
</style>
